<!DOCTYPE html>
<html>
<head>
<title>Notekeeper</title>
<meta name="viewport" 
      content="width=device-width, initial-scale=1">	

<link rel="stylesheet" href="themes/Notekeeper.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href = 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />

<link rel="stylesheet" href="styles.css" />

<script type="text/javascript" 
        src="http://code.jquery.com/jquery-2.1.3.min.js">
</script>

<script type="text/javascript" 
        src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<script src="application.js"></script>
</head>
<body>

	<div data-role="page" data-theme="a">
		<div data-role="header">
			<h1>Notekeeper</h1>
		</div>

		<div role="main" class="ui-content" data-theme="a">
			<form>
				<div>
					<input id="title" type="text" placeholder="Add a note" />
				</div>
				<div>
					<textarea id="note" placeholder="The content of your note"></textarea>
				</div>
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<input id="btnNoThanks" type="submit" value="No Thanks" />
					</div>
					<div class="ui-block-b">
						<input id="btnAddNote" type="button" value="Add Note" data-icon="plus" />
					</div>
				</div>
			</form>

			<ul id="notesList" data-role="listview" data-inset="true">
				<li data-role="list-divider">Your Notes</li>
				<li id="noNotes">You have no notes</li>
			</ul>
		</div>

		<div data-role="footer" class="footer-docs">
			<h5>Intro to jQuery Mobile</h5>
		</div>
	</div>

</body>
</html>